import React, { Component } from 'react';
import {
  List,
  Avatar
} from "antd";
import { appendArrayKeys } from "../../utils";
import http from '../../axios'
import '../../style/common.less';

const ListItem = List.Item;
const ListItemMeta = List.Item.Meta;

class ProjectList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: false
    }
  }

  getList = () => {
    this.setState({
      loading: true
    })
    http.project.getDoingList().then((r) => {
      const data = appendArrayKeys(r);
      this.setState({
        data,
        loading: false,
      })
    })
  }

  componentDidMount() {
    this.getList();
  }

  render() {
    const { data, loading } = this.state;
    return (
      <div className={loading ? 'loading container' : 'container'}>
        <List
          loading={loading}
          dataSource={data}
          renderItem={
            item => (
              <ListItem
                className={item.status === 0 ? 'doing' : item.status === 1 ? 'finish' : 'master'}
              >
                <ListItemMeta
                  avatar={<Avatar src={item.img} />}
                  title={<a href={item.link}>{item.title}</a>}
                  description={item.content}
                />
              </ListItem>
            )
          }
        />
      </div>
    )
  }
}

export default ProjectList;